<template>
	<div class="need-item-container">
		<div class="tree-content">
			<el-card>
				<div slot="header" class="card-header">
					<span>位置导航</span>
					<div class="card-header-btn">
						<el-dropdown size="mini" @command="handleCommand">
							<el-button size="mini" type="primary">
								添加位置
								<i class="el-icon-arrow-down el-icon--right"></i>
							</el-button>
							<el-dropdown-menu slot="dropdown" style="width: 98px;">
								<el-dropdown-item
									v-for="(item, i) in typeList"
									:key="i"
									:command="item.command"
								>{{item.name}}</el-dropdown-item>
							</el-dropdown-menu>
						</el-dropdown>
					</div>
				</div>
				<div>
					<el-input size="mini" v-model="pageName" @change="handleSearchTree" placeholder="请输入位置名称">
						<el-button
							size="mini"
							slot="suffix"
							@click="handleSearchTree"
							icon="el-icon-search"
							type="text"
						></el-button>
					</el-input>
				</div>
				<tree-menu
					class="tree-menu"
					:treeProps="treeProps"
					@selectedMenu="handleSelectedMenu"
					@nodeClick="handleNodeClick"
				></tree-menu>
			</el-card>
		</div>
		<div class="mess-content">
			<bury-info :infoProps="buryInfoProps" @savePage="handleSavePage"></bury-info>
			<el-card class="list-card" v-if="buryInfoProps.operateType === 'edit'">
				<el-input
					size="mini"
					class="search-input"
					@change="handleSearchEvent"
					placeholder="请输入埋点名称"
					v-model="trackName"
				>
					<el-button
						size="mini"
						slot="suffix"
						@click="handleSearchEvent"
						icon="el-icon-search"
						type="text"
					></el-button>
				</el-input>
				<el-tabs v-model="tabActive" @tab-click="handleTabClick">
					<el-tab-pane :label="tabName.first" name="first" class="page-content">
						<event-table
							:infoProps="buryInfoProps"
							:treeProps="treeProps"
							:searchArgs="tableSearchArgs"
						></event-table>
					</el-tab-pane>
					<el-tab-pane :label="tabName.second" name="second" class="un-page-content">
						<event-table
							:infoProps="buryInfoProps"
							:treeProps="treeProps"
							:searchArgs="childSearchArgs"
						></event-table>
					</el-tab-pane>
				</el-tabs>
			</el-card>
		</div>
		<draw-image-module :imageInfo="drawImageInfo" @imagePosition="handleDrawPosition"></draw-image-module>
	</div>
</template>

<script>
	import BuryInfo from "./buryInfo";
	import eventTable from "./eventTable";

	export default {
		name: "needItem",
		components: {
			BuryInfo,
			eventTable
		},
		data() {
			return {
				id: null,
				requirementId: null,
				pageDbId: null,
				typeList: [
					{
						name: "添加页面",
						command: 1
					},
					{
						name: "添加资源位",
						command: 2
					}
				],
				type: "",
				pageName: "",
				// 树形导航
				treeProps: {
					data: [],
					action: ["block", "booth", "offline"]
				},
				// 基本信息：form
				buryInfoProps: {
					requirementId: null,
					pageDbId: null,
					actionType: 1,
					operateType: "add",
					url: ""
				},
				// 鼠标绘制图片
				drawImageInfo: {
					id: null,
					visible: false,
					actionType: null,
					imageUrl: null
				},
				// tabs: 埋点列表
				trackName: "",
				tabActive: "first",
				tabName: {
					first: "页面级埋点",
					second: "页面及下级埋点"
				},
				tableSearchArgs: {
					requirementId: null,
					pageDbId: null,
					hasChildren: null,
					trackName: ""
				},
				childSearchArgs: {
					requirementId: null,
					pageDbId: null,
					hasChildren: true,
					trackName: ""
				}
			};
		},
		created() {
			let { id, pageDbId } = this.$route.params;
			this.id = unescape(id);
			if (pageDbId) {
				this.pageDbId = unescape(pageDbId);
			}
			this.handleQueryRequirement();
		},
		mounted() {},
		methods: {
			// 查询需求详情
			async handleQueryRequirement() {
				let data = {
					id: this.id
				};
				let res = await this.$requirementApi.requirementQuery(data);
				if (res) {
					let { requirementId, sdkType } = res.value;
					this.requirementId = requirementId;
					this.tableSearchArgs.requirementId = this.requirementId;
					this.childSearchArgs.requirementId = this.requirementId;
					this.buryInfoProps.requirementId = this.requirementId;
					this.buryInfoProps.sdkType = sdkType;
					this.buryInfoProps.sdkType = 3;
					if (this.pageDbId) {
						this.buryInfoProps.operateType = "edit";
						this.buryInfoProps.pageDbId = this.pageDbId;
						this.tableSearchArgs.pageDbId = this.pageDbId;
						this.childSearchArgs.pageDbId = this.pageDbId;
					}

					// 查询位置导航
					let data = { requirementId };
					if (this.pageName) {
						data.pageName = this.pageName;
					}
					let _res = await this.$pageApi.pageNavigate(data);
					if (_res) {
						let { pageNavigateList } = _res.value;
						this.treeProps.data = this.dataToTree(pageNavigateList);
						if (this.pageDbId) {
							pageNavigateList.map(_i => {
								if (_i.id == this.pageDbId) {
									this.buryInfoProps.actionType = _i.pageType;
								}
							});
						} else if (
							this.treeProps.data.length > 0 &&
							!this.treeProps.data[0].parentId
						) {
							this.handleNodeClick({
								actionType: this.treeProps.data[0].pageType,
								id: this.treeProps.data[0].id,
								pageId: this.treeProps.data[0].pageId
							});
						}
					}
				}
			},
			// 查询位置导航
			async handleQueryPageNavigate() {
				let data = {};
				if (this.pageDbId) {
					data.pageId = this.pageDbId;
				} else {
					data.requirementId = this.requirementId;
				}
				if (this.pageName) {
					data.pageName = this.pageName;
				}
				let res = await this.$pageApi.pageNavigate(data);
				if (res) {
					let { pageNavigateList } = res.value;
					this.treeProps.data = this.dataToTree(pageNavigateList);
				}
			},
			// 添加位置选项
			handleCommand(command) {
				this.buryInfoProps = {
					requirementId: this.requirementId,
					pageDbId: this.pageDbId,
					actionType: command,
					operateType: "add",
					url: null
				};
			},
			// 导航搜索：树导航列表
			handleSearchTree() {
				this.handleQueryPageNavigate();
			},
			/*树形导航*/
			// 资源位 | 下线
			handleSelectedMenu(obj) {
				let { actionType } = obj;
				if (actionType === 2 || actionType === 3) {
					this.buryInfoProps = {
						requirementId: this.requirementId,
						pageDbId: obj.id,
						actionType: actionType,
						operateType: "add",
						url: null
					};
					if (obj.imageUrl) {
						this.drawImageInfo = {
							id: obj.id,
							actionType: actionType,
							visible: true,
							imageUrl: obj.imageUrl
						};
					}
				} else if (actionType === "offline") {
					// 下线
					this.$confirm(`您确定要下线该位置吗？`, "下线位置", {
						confirmButtonText: "确定",
						cancelButtonText: "取消",
						type: "warning"
					})
						.then(() => {
							this.handlePageStatusOperate(obj.id);
						})
						.catch(() => {});
				}
			},
			// 页面状态更改：下线
			async handlePageStatusOperate(id) {
				let res = await this.$pageApi.pageStatusOperate({
					id,
					operateType: 1
				});
				if (res) {
					this.$message({
						type: "success",
						message: "下线成功"
					});
					this.handleQueryPageNavigate();
				}
			},
			// 点击节点，右侧信息变化
			handleNodeClick(obj) {
				this.buryInfoProps = {
					requirementId: this.requirementId,
					pageDbId: obj.id,
					actionType: obj.actionType,
					operateType: "edit"
				};
				let { actionType } = obj;
				if (actionType === 1) {
					this.tabName.first = "页面级埋点";
					this.tabName.second = "页面及下级埋点";
				} else if (actionType === 2) {
					this.tabName.first = "资源位级埋点";
					this.tabName.second = "资源位及下级埋点";
				}
				// else if (actionType === 3) {
				//   this.tabName.first = "展位级埋点";
				//   this.tabName.second = "展位及下级埋点";
				// }
				this.tabActive = "first";
				this.tableSearchArgs.pageDbId = obj.id;
				this.childSearchArgs.pageDbId = obj.id;
			},
			// 页面保存成功，刷新树导航
			handleSavePage(val) {
				if (val) {
					this.handleQueryPageNavigate();
				}
			},
			/*---------*/
			/* 资源位绘制 */
			handleDrawPosition(val) {
				let { iconPosition } = val;
				if (iconPosition === null) {
					this.buryInfoProps.url = null;
					this.buryInfoProps.iconPosition = [];
				} else {
					this.buryInfoProps.url = this.drawImageInfo.imageUrl;
					this.buryInfoProps.iconPosition = val.iconPosition;
				}
			},
			/*-----*/
			/*  埋点tabs  */
			handleTabClick(tab) {
				let { name } = tab;
				this.tabActive = name;
			},
			// 埋点列表搜索
			handleSearchEvent() {
				if (this.tabActive === "first") {
					this.tableSearchArgs.trackName = this.trackName;
				} else {
					this.childSearchArgs.trackName = this.trackName;
				}
			},
			// 打开drawer
			handleOpenDrawer() {
				let { hasChildren, trackName } = this.tableSearchArgs;
				this.tableSearchArgs = {
					requirementId: this.requirementId,
					pageDbId: null,
					hasChildren,
					trackName,
					openDrawer: true
				};
			}
		},
		watch: {}
	};
</script>

<style lang="scss">
	.need-item-container {
		display: -webkit-box;
		display: -moz-box;
		display: -ms-flexbox;
		display: -webkit-flex;
		display: flex;

		.tree-content {
			width: 30%;
			padding-right: 10px;

			.el-card {
				height: 100%;
			}

			.tree-menu {
				margin-top: 10px;
			}
		}

		.mess-content {
			width: 70%;

			.el-card__body {
				padding: 10px 20px;
			}

			.list-card {
				margin-top: 10px;
				position: relative;

				.search-input {
					position: absolute;
					width: 200px;
					right: 20px;
					z-index: 2;
				}
			}

			.search {
				font-size: 12px;
				padding-bottom: 8px;

				.btn {
					float: right;
					margin-top: -5px;
				}
			}
		}
	}
</style>
